<!-- 后台页面模板 -->

<template>
  <div class="admin">
    <!-- 导航栏 -->
    <Navigation ref="navigation" :style="isCollapse ? 'width: 150px' : 'width: 36px'" :isCollapse="isCollapse"/>
    <!-- /导航栏 -->

    <!-- 右侧容器 -->
    <div class="main">

      <!-- 右侧顶部 -->
      <div class="main-header">
        <i class="iconfont icon-daohang" @click="isCollapse = !isCollapse" :class="isCollapse ? 'open' : 'fold'"/>
        <el-button type="text" @click="signOut">
          <i class="iconfont icon-tuichu"></i>
        </el-button>
      </div>
      <!-- /右侧顶部 -->

      <!-- nuxt路由容器 -->
      <div class="main-content">
        <nuxt />
      </div>
      <!-- /nuxt路由容器 -->

    </div>
    <!-- /右侧容器 -->
  </div>
</template>

<script>
// 组件 后台管理 导航栏
import Navigation from '@/components/admin/Navigation.vue'

export default {
  components: {
    Navigation
  },
  data () {
    return {
      isCollapse: true
    }
  },
  methods: {
    // 退出
    signOut () {
      this.$confirm('退出后台系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除cookie
        let keys = document.cookie.match(/[^ =;]+(?=\=)/g)
        if(keys) {
					for(var i = keys.length; i--;)
						document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
        }
        
        localStorage.removeItem('token')
        this.$router.push({
          path: '/admin/login'
        })
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });          
      });
    }
  }
}
</script>

<style lang="scss">
  .admin {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      .main-header {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e6e6e6;
        i {
          font-size: 30px;
          display:inline-block;
          cursor: pointer;
          transition: .3s transform;
          margin-left: 10px;
          &.open {
            transform:rotate(0deg);
            -ms-transform:rotate(0deg); 	/* IE 9 */
            -moz-transform:rotate(0deg); 	/* Firefox */
            -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
            -o-transform:rotate(0deg); 	/* Opera */
          }
          &.fold {
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); 	/* IE 9 */
            -moz-transform:rotate(90deg); 	/* Firefox */
            -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
            -o-transform:rotate(90deg); 	/* Opera */
          }
        }
        button {
          margin: 0;
          padding: 0;
          float: right;
          line-height: 50px;
          margin-right: 10px;
          i {
            color: #000000;
          }
        }
      }
      .main-content {
        padding: 20px;
        flex: 1;
        overflow-y: auto;
        overflow-x: auto;
      }
    }
  }
</style>
